<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
    <style>
        .txttest{
            font-size: 20px;
            text-align: center;
            line-height: 150px;
        }
        .bgtest{
            background-color: aqua;
        }
        .bordertest{
            border: solid blue 10px;
        }
        .colortest{
            color: rgb(233, 211, 16);
        }
    </style>
</head>

<body>
    <div id="app">
<div class="txttest" :class="{bgtest:bgset,bordertest:borderset,colortest:colorset}">hello</div>
<button @click="myChange">切换</button>   
<hr>
<div class="txttest" :class="obj">hello</div>
<hr>
<div :class="[activeClass, errorClass]">errorClass</div>
<hr>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">你好</div>
<div :style="styleObject">对象的声明方式</div>
<hr>
<div :style="borderset ? styleObject : falseColor">三元表达式</div>
</div>
    <script>
        const {ref,reactive} =Vue
        const app = Vue.createApp({
            setup(props) {
                const bgset =ref(true);
                const borderset =ref(true);
                const colorset =ref(true);

const obj = reactive({
    bgset:true,
    borderset:false,
    colorset:false
});
const activeClass = ref('active')
const errorClass = ref('text-danger');
const activeColor = ref('red')
const fontSize = ref(30);
const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})
function myChange(params) {
    bgset.value= !bgset.value;
    styleObject.color='blue';
    console.log(styleObject.color);
}
                return {
                    borderset,colorset,bgset,myChange,obj,activeClass,errorClass,activeColor,fontSize,styleObject
                }
            }
        }).mount("#app");
    </script>
</body>

</html>